<template>

    <section class="explore-section" id="explore-section">
        <h1 class="title">推荐景区</h1>

        <div class="container">
            <div class="card" v-for="item in hotSpots" data-aos="fade-up" @click="handleclick(item.id)">
                <img :src="item.thumbnail" class="img">
                <div class="content">
                    <h1 class="tour-name">{{ item.spotName }}</h1>
                    <p class="city-name">{{ item.cityName }}</p>
                </div>
            </div>
        </div>

    </section>

</template>


<script setup>
import { homeHotSoptsAPI, updateSpotViewCountAPI } from '@/api'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

let hotSpots = ref()
const initHotSpots = async () => {
    let res = await homeHotSoptsAPI()
    hotSpots.value = res
}

const handleclick = async (val) => {
    await updateSpotViewCountAPI(val)
    router.push({
        path: "/layout/spotdetail",
        query: {
            spotId: val
        }
    }).catch(err => { })
}
onMounted(() => {
    initHotSpots()
})

</script>


<style lang="scss" scoped>
.explore-section {
    position: relative;
    width: 100%;
    padding: 4rem 10%;
    color: #222;
}

.explore-section .title {
    font-size: 4rem;
    font-weight: bolder;
    text-align: center;
}

.container {
    position: relative;
    width: 100%;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 15px;
    cursor: pointer;
    display: flex;
    align-items: end;
}

.card:nth-child(2) {
    grid-row: span 2;
}

.card:last-child {
    grid-column: span 2;
}

.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: .5s;
    z-index: -1;
}

.card:hover .img {
    opacity: 0.8;
    transform: scale(1.1);
}

.tour-name {
    color: aliceblue;
    font-size: 2.4rem;
    font-weight: bolder;
}

.city-name {
    margin-left: 20px;
    font-size: 1.8rem;
    position: relative;
    color: aliceblue
}

.city-name::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    background: url("@/assets/image/pin.png");
    width: 18px;
    height: 18px;
    background-size: contain;
}

@media (max-width:991px) {
    .container {
        height: 900px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .card:last-child {
        grid-column: span 1;
    }

    .card:nth-last-child(3) {
        grid-row: span 2;
    }
}

@media (max-width:768px) {
    .container {
        height: auto;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }

    .card {
        grid-row: auto !important;
        height: 400px;
        grid-column: auto !important;
    }
}
</style>